<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link href="../../css/mui.plus.css" rel="stylesheet" />		
	<style type="text/css">
		.pat-scale {
			color: #666;
		}
		.pat-title, .pat-subject {
			padding: 11px 15px;
		}
		.pat-title .mui-pull-right {
			font-size: 12px;
		}
		.pat-title .mui-pull-right>b {
			color: #30B497;
		}
		.pat-subject .mui-input-row {
			font-size: 15px;
			color: #666;
		}
		.pat-subject {
			color: #333;
		}
		.mui-input-group .mui-input-row:after, 
		.mui-input-group:after,
		.mui-input-group:before {
			height: 0;
		}
		.mui-input-group {
			margin: 0 15px;
			background-color: #f5f5f5;
		}
		.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
			font-size: 20px;
		}
		footer {
			padding: 20px 30%;
		}
		.mui-btn-block {
			padding: 8px 0;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">量表详情</h1>
	</header>
	
	<div id="topic-list" class="mui-content pat-scale">
		<div class="pat-title">
			<span>加载中...</span>
			<span class="mui-pull-right">共&nbsp;<b>N</b>&nbsp;题</span>
		</div>		
		
		<form class="mui-input-group">
    		<div class="oe-emp">
        		<img src="../../images/blank_page/pub.png"/>
        	</div>
		</form>
		
	</div>
	
	<script id="tmp-scale" type="text/html">
		{{each data as v i}}
			{{if data[i].rs_id === target}}
				<div class="pat-title">
					<span>{{v.rs_name}}</span>
					<span class="mui-pull-right">共&nbsp;<b>{{v.rs_subject_count}}</b>&nbsp;题</span>
				</div>		
				
				<form class="mui-input-group">
					{{each data[i].subjects as w j}}
				    	{{if w.subject_option_style === 'RADIO'}}
					    	<div class="pat-subject">
					    		{{w.subject_num}}.{{w.subject_question}}
					    		{{each w.options as u k}}
						    		<div class="mui-input-row mui-radio ">
							        	<label>{{u.option_content}}</label>
							        	<input name="{{w.subject_id}}" type="radio"
						        		 	data-rs='{{v.rs_id}}'
						        		 	data-sub='{{w.subject_id}}'
						        		 	data-opt='{{u.option_id}}'
						        		 	data-score='{{u.option_score}}'>
							   		</div>
							   	{{/each}}
						   	</div>
						{{else if w.subject_option_style === 'CURSOR'}}	
							<div class="pat-subject">
								{{w.subject_num}}.{{w.subject_question}} (范围：{{w.subject_min}}~{{w.subject_max}})
								<div class="mui-input-row mui-input-range">
									{{if v.rs_id === '58'}}
									<div style="position: relative;width: 65%;margin-left: 35%;">
							        	<span>不痛</span>
						        		<span style="position: absolute; right: 0;">最痛</span>
							        </div>
									{{/if}}
									{{if v.rs_id === '57' && w.subject_id === '247'}}
									<div style="position: relative;width: 65%;margin-left: 35%;">
							        	<span>内翻</span>
						        		<span style="position: absolute; right: 0;">外翻</span>
							        </div>
									{{/if}}
									<label>{{w.subject_min}}</label>
							        <input type="range" min="{{w.subject_min}}" max="{{w.subject_max}}" value="{{w.subject_min}}"
							        	data-rs='{{v.rs_id}}'
					        		 	data-sub='{{w.subject_id}}'>
							    </div>
						    </div>
				    	{{/if}}
				    {{/each}}
				    {{if v.rs_id === '58'}}
				    	<img style="padding: 25px 20px;" src="../../images/scale/vas.png"/>
				    {{/if}}
				</form>
			{{/if}}
		{{/each}}
		<footer>
			<button id="btn-submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">完&nbsp;&nbsp;成</button>
		</footer>
	</script>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../data/scale.data.js"></script>
	<script type="text/javascript">
		(function($, a){
			var wv,
				tmpData = scaleData,
				topicList = document.getElementById("topic-list");
				
			var case_id,case_status;// 骨研社——老年髋部骨折研究项目——病例——术后随访量表参数
				
			function previousSbilingChekced(el){
				var subject = el.parentElement.parentElement;
				if(subject.oldLabel){
					subject.oldLabel.style.color = '#666';
				}
				if(el.checked){
					el.previousElementSibling.style.color = '#30b497';
					subject.oldLabel = el.previousElementSibling;
				}
			}
			
			function objToStr(obj){
				if((typeof obj === 'string') || (typeof obj === 'number')){
					return obj + '\n';
				}else if(typeof obj === 'object'){
					var tmp = '';
					for(var i in obj){
						tmp += i + ':' + obj[i] + '\n'
					}
					return tmp;					
				}else {
					console.error('Type error');
				}
			}
			
			$('#topic-list').on('change', 'input[type=radio]', function(){
				previousSbilingChekced(this);
			});
			
			$('#topic-list').on('input', 'input[type=range]', function(){
				// HSS膝关节评分量表处理
				this.previousElementSibling.innerHTML = this.value;
			});
			
			$('#topic-list').on('tap', '#btn-submit', function(){
				a.net.post('c_rating_scale/get_evaluate', a.form.serializeForm('topic-list'), function(data){
					if(data && data.code === '100'){
						var score = '分数\n' + objToStr(data.data.score),
							percentage = data.data.percentage ? '\n指数\n' + objToStr(data.data.percentage) : '';
							evaluate = data.data.evaluate ? '\n评分结果\n'+ objToStr(data.data.evaluate) : '';
						
						$.alert(score+percentage+evaluate, '骨医快线', '完成', function(){
							if(case_id){
								var commitData = {};
								commitData.case_id = case_id;
								commitData[case_status] = data.data.score;
								app.net.post('c_old_man_hip_broke_prj_case/update', commitData, function(data){
				    				if(data && data.code === '100') {
				    					$.toast('保存成功');
				    					$.oldBack = $.back; 
							    		$.back = function(){
							    			var lastPage = plus.webview.currentWebview().opener();
							    			$.fire(lastPage, 'refresh');
							    			$.oldBack()
							    		}
							    		$.back()
				    				}else {
				    					app.net.post('c_old_man_hip_broke_prj_case_test/update', commitData, function(data){
						    				if(data && data.code === '100') {
						    					$.toast('保存成功');
						    					$.oldBack = $.back; 
									    		$.back = function(){
									    			var lastPage = plus.webview.currentWebview().opener();
									    			$.fire(lastPage, 'refresh');
									    			$.oldBack()
									    		}
									    		$.back()
						    				}; 
						    			})
				    				};
				    			});
							}else{
								$.back();
							}
						});
					}else if(data.code === '300'){
						$.toast('您尚未填写任何数据哦');
					}else {
						$.toast('您还有选项未填呢~');
					}
					
				});
			});

			$.plusReady(function(){
				wv = plus.webview.currentWebview();
				tmpData.target = wv.rs_id;
				var html = template('tmp-scale', tmpData);
				topicList.innerHTML = html;
				case_id = wv.case_id;
				case_status = wv.case_status;
				
				$('input[type=range]').input();
			});
			
		}(mui, app));
	</script>
</body>
</html>